<template>
  <div class="about">
    <h1>二次封装组件的应用(真正)</h1>
    <div class="com">
      <!-- 异步组件 ref 绑定时，如果仍然需要在 onMounted 中使用，那么就需要通过 v-bind 和 ref 结合绑定，绑定的值也不再是 ref 对象，而是一个函数 -->
      <SecondPackageComponents
        :inpSlots="ipslots"
        :selSlots="selslots"
        :inpProps="inpprops"
        :selProps="selprops"
        v-model:vModelInput="inpModel"
        v-model:vModelSelect="selModel"
        :ref="packageComponent"
      >
        <template #inp_prefix>
          <p>http://input===></p>
        </template>
        <template #sel_prefix>
          <p>select::::::===></p>
        </template>
        <template #sel_empty>
          <p>暂无数据</p>
        </template>
        <template #sel_default>
          <el-option
            v-for="item in vm.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </template>
      </SecondPackageComponents>
    </div>
    <p>组件外测试双向绑定：</p>
    input====> {{ inpModel }}
    <br />
    select====> {{ selModel }}
  </div>
</template>
<script setup>
import { defineAsyncComponent, nextTick, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
// 使用 defineAsyncComponent 创建一个异步组件
const SecondPackageComponents = defineAsyncComponent(() =>
  import("@/components/secondPackageComponents.vue")
);

const selectChange = (val) => {
  console.log("select 的 change 事件", val);
};

// 数据
const vm = reactive({
  value: "",
  options: [
    {
      value: "Option1",
      label: "Option1",
    },
    {
      value: "Option2",
      label: "Option2",
    },
    {
      value: "Option3",
      label: "Option3",
      disabled: true,
    },
    {
      value: "Option4",
      label: "Option4",
    },
    {
      value: "Option5",
      label: "Option5",
    },
  ],
});
// v-model 的定义
let inpModel = ref("12314");
let selModel = ref(["Option2"]);
// 属性的定义
let inpprops = {
  // 属性的定义
  placeholder: "请输入 input 框",
  clearable: true,
  "prefix-icon": Search,
  // 方法的定义
  fun: {
    change: (e) => {
      console.log("input 的 change 事件 :>> ", e);
    },
    input: (e) => {
      console.log("input 的 input 事件 :>> ", e);
    },
    blur: (ev) => {
      console.log("input 的 blur 事件 :>> ", ev);
    },
  },
};
let selprops = {
  placeholder: "请选择 select 框",
  multiple: true,
  "collapse-tags": true,
  "collapse-tags-tooltip": true,
  filterable: true,
  // 方法的定义
  fun: {
    change: selectChange,
  },
  clearable: true,
};
// 插槽的定义
// 结构 ————> 圆组件中的插槽名：现在定义的插槽名
const ipslots = {
  prefix: "inp_prefix",
};
const selslots = {
  prefix: "sel_prefix",
  empty: "sel_empty",
  default: "sel_default",
};
// 获取元素 ———— 内部方法 ———— ref 的传递
const packageComponent = (dom) => {
  // 参数 dom 是绑定的元素
  console.log("dom>>>", dom?.elementRefObj);
  dom?.elementRefObj &&
    dom.elementRefObj.elInputRef.focus &&
    dom.elementRefObj.elInputRef.focus();
};
</script>
<style lang="scss" scoped>
.com {
  height: 150px;
  width: 300px;
  margin: 10px auto;
}
</style>
